<script setup>
import { reactive, ref, computed, onMounted } from "vue";
import { useRoute, useRouter } from 'vue-router'
import { removeToken } from "@/composables/cookie";
import { showMessage, showModel } from "@/composables/util.js";
import { updatePassword, updateUserInfo, collectCourse, cancelCollectCourse, isCollected } from "@/api/common/user"
import { uploadFile } from "@/api/common/file"
import { findArticleDetail } from "@/api/common/index"
import { addOrder } from "@/api/common/order"
import { Star, StarFilled } from '@element-plus/icons-vue'
import moment from 'moment'
import hljs from 'highlight.js'
// 代码高亮样式
import 'highlight.js/styles/tokyo-night-dark.css'
// 从浏览器本地存储中取出用户信息
let userInfo = JSON.parse(localStorage.getItem("userInfo"))
const route = useRoute()
const router = useRouter()
// 控制个人信息弹出框
let info = ref(false)
let password = ref(false)
// 设置导航栏激活项
const activeIndex = ref('2')
const form1 = reactive({
  id: null,
  username: null,
  avatar: null,
  token: null
})
const form2 = reactive({
  username: '',
  password: '',
  newPassword: '',
  surePassword: ''
})
onMounted(() => {
    if(userInfo !== null) {
      form1.id = userInfo.id
      form1.username = userInfo.username
      form1.avatar = userInfo.avatar
      form1.token = userInfo.token
      form2.username = userInfo.username
    }
    // 在组件挂载后获取文章详情
    refreshArticleDetail(route.params.id)
})
const handleAvatarChange = (file) => {
    // 创建表单对象
    let formData = new FormData()
    formData.append('file', file.raw)
    // 调用后台文件上传接口
    uploadFile(formData).then((e) => {
        // 响参失败，提示错误消息
        if (e.data.success == false) {
            let message = e.message
            showMessage(message, 'error')
            return
        }
        // 成功则设置头像链接，并提示成功
        form1.avatar = e.data.data
        console.log("头像地址：" + form1.avatar)
    })
}
// 修改用户信息
const saveInfo = () => {
    // 调用后端修改用户信息接口
    updateUserInfo(form1).then((res) => {
        if (res.data.success === true) {
            // 提示修改成功
            showMessage('修改成功')
            // 更新存储的用户信息JSON格式到Local Storage(浏览器本地存储) 中
            localStorage.setItem("userInfo", JSON.stringify(res.data.data))
            // 更新之前获取的用户信息变量
            userInfo = JSON.parse(localStorage.getItem("userInfo"))
            info = false
            window.location.reload();
        } else {
            let message = res.data.message
            console.log(message)
            // 提示消息
            showMessage(message, 'error')
        }
    })
}

// 修改用户密码
const savePassword = () => {
    // 调用后端修改用户信息接口
    updatePassword(form2).then((res) => {
        if (res.data.success === true) {
            // 提示修改成功
            showMessage('修改成功')
            // 删除cookie中的token
            removeToken()
            // 删除Local Storage中的userInfo
            localStorage.removeItem('userInfo')
            // 重新跳转登录页面
            router.push('/login')
        } else {
            let message = res.data.message
            console.log(message)
            // 提示消息
            showMessage(message, 'error')
        }
    })

}
// 退出登录方法
const logout = () => {
    showModel('是否退出登录?').then(() => {
        // 删除cookie中的token
        removeToken()
        // 删除Local Storage中的userInfo
        localStorage.removeItem('userInfo')
        showMessage('退出登录成功!')
        // 跳转登录页
        router.push('/login')
    })
}
function goIndex() {
    // router.push('/').then(() => {
    //     setTimeout(() => window.location.reload(), 50) // 延迟确保路由完成
    // })
    router.push('/')
}
function goLogin() {
    // router.push('/login').then(() => {
    //     setTimeout(() => window.location.reload(), 50) // 延迟确保路由完成
    // })
    router.push('/login')
}
function goOrder() {
    router.push('/order')
}
function goCollect() {
  router.push('/collect')
}
// 文章数据
const article = ref({})

// 获取文章详情
async function refreshArticleDetail(id) {
    try {
        const res = await findArticleDetail({ 
            courseId: id, 
            type: 0, 
            userId: userInfo ? userInfo.id : null 
        })
        if (res.data.success) {
            article.value = res.data.data
            console.log("文章详情数据", article.value)
            // 检查是否是付费课程且用户未登录
            if (article.value.price > 0 && !userInfo) {
                showMessage('请先登录后再查看付费课程', 'warning')
                router.push('/login')
                return
            }
            // 在获取文章详情后检查收藏状态
            if (userInfo) {
                await checkIsCollected()
            }
        }
    } catch (error) {
        console.error('获取文章详情失败:', error)
    }
}

// 正文 div 引用
const articleContentRef = ref(null)
onMounted(() => {
    // 使用 MutationObserver 监视 DOM 的变化
    const observer = new MutationObserver(mutationsList => {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                // 获取所有 pre code 节点
                let highlight = document.querySelectorAll('pre code')
                // 循环高亮
                highlight.forEach((block) => {
                    hljs.highlightBlock(block)
                })
            }
        }
    })

    // 配置监视子节点的变化
    const config = { childList: true, subtree: true }
    // 开始观察正文内容变化
    //observer.observe(articleContentRef.value, config)
})

// 订单相关状态
const orderForm = reactive({
    courseId: article.value.id,
    number: null,
    type: 0,
    orderTime: null,
    price: article.value.price,
    userId: userInfo ? userInfo.id : null
})
const isSubmitting = ref(false)

// 生成订单编号（网页1+网页3优化）
const generateOrderNo = () => {
    const timestamp = new Date().getTime()
    const random = Math.floor(Math.random() * 1000000)
    orderForm.number = `${timestamp}_${random}`
    console.log("订单数据" + JSON.stringify(orderForm))
    return orderForm.number
}

function orderSumbit() {
    console.log("进入orderSumbit")
    console.log("文章详情数据" + JSON.stringify(article.value.id))
    orderForm.courseId = article.value.id
    orderForm.price = article.value.price
    console.log("订单1详情1数据" + JSON.stringify(orderForm))
    // 调用后台分页接口，并传入所需参数
    addOrder(orderForm)
        .then((res) => {
            if (res.data.success == true) {
                showMessage('成功下单')
                // 跳转我的订单页面
                goOrder()
            } else {
                let message = res.data.message
                console.log(message)
                // 提示消息
                showMessage(message, 'error')
            }
        })
}

// 收藏相关
const isCollectedState = ref(false)

// 检查是否已收藏
const checkIsCollected = async () => {
    if (!userInfo) return
    try {
        const res = await isCollected({
            userId: userInfo.id,
            courseId: route.params.id,
            type: 0
        })
        if (res.data.success) {
            isCollectedState.value = res.data.data
            console.log('收藏状态:', isCollectedState.value)
        }
    } catch (error) {
        console.error('检查收藏状态失败:', error)
    }
}

// 收藏/取消收藏
const toggleCollect = async () => {
  if (!userInfo) {
    showMessage('请先登录!', 'warning')
    return
  }

  const params = {
    userId: userInfo.id,
    courseId: article.value.id,
    type: 0
  }

  try {
    const res = await (isCollectedState.value ? cancelCollectCourse(params) : collectCourse(params))
    if (res.data.success) {
      isCollectedState.value = !isCollectedState.value
      showMessage(isCollectedState.value ? '收藏成功' : '已取消收藏')
    }
  } catch (error) {
    console.error('操作失败:', error)
    showMessage('操作失败，请重试', 'error')
  }
}

</script>

<template>
    <!-- 主容器使用Element布局 -->
    <el-container class="home-container">
        <!-- 导航栏 -->
        <el-header class="header">
            <div class="nav-container">
                <div class="logo">
                    高校<span class="blue">互联网技术</span>在线学习平台
                </div>
                <el-menu mode="horizontal" :default-active="activeIndex">
                    <el-menu-item index="1">
                        <router-link to="/">首页</router-link>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <router-link to="/article-course">图文课程</router-link>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <router-link to="/video-course">视频课程</router-link>
                    </el-menu-item>
                </el-menu>
                <div class="search-box">
                    <el-input placeholder="搜索课程..." suffix-icon="Search" class="search-input" />
                </div>
                <!-- 未登录状态 -->
                <div class="user-wrapper" v-if="!userInfo">
                    <el-button type="primary" class="login-btn" @click="goLogin" round>
                        <i class="el-icon-user"></i>
                        <span>登录 / 注册</span>
                    </el-button>
                </div>

                <!-- 已登录状态 -->
                <div class="user-panel" v-else>
                    <el-dropdown trigger="hover">
                        <div class="user-card">
                            <div class="profile">
                                <el-avatar :src="userInfo.avatar" :size="36" class="user-avatar"
                                    :style="{ backgroundColor: '#8ac8ff' }" />
                            </div>
                        </div>

                        <!-- 下拉菜单 -->
                        <template #dropdown>
                            <el-dropdown-menu class="user-menu">
                                <el-dropdown-item class="menu-item" @click="info = true">
                                    <i class="el-icon-user-solid"></i>个人信息
                                </el-dropdown-item>
                                <el-dropdown-item class="menu-item">
                                    <i class="el-icon-time" @click="goOrder"></i>我的订单
                                </el-dropdown-item>
                                <el-dropdown-item class="menu-item" @click="goCollect">
                                    <i class="el-icon-star-off"></i>我的收藏
                                </el-dropdown-item>
                                <el-dropdown-item class="menu-item" @click="password = true">
                                    <i class="el-icon-lock"></i>修改密码
                                </el-dropdown-item>
                                <el-dropdown-item class="menu-item logout" @click="logout">
                                    <i class="el-icon-switch-button"></i>退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </el-header>
        <!-- 文章详情主体 -->
        <el-main>
            <!-- 未购买状态显示支付页面 -->
            <div v-if="article.isShow === 0 && userInfo" class="payment-container">
                <el-card class="order-card">
                    <!-- 订单标题 -->
                    <template #header>
                        <div class="card-header">
                            <h2 style="font-size: 30px;">课程下单</h2>
                        </div>
                    </template>

                    <!-- 订单信息 -->
                    <el-descriptions :column="1" border>
                        <el-descriptions-item label="课程名称">
                            {{ article.title }}
                        </el-descriptions-item>
                        <el-descriptions-item label="订单编号">
                            {{ orderForm.number || generateOrderNo() }}
                        </el-descriptions-item>
                        <el-descriptions-item label="应付金额">
                            <span class="price">¥{{ article.price?.toFixed(2) }}</span>
                        </el-descriptions-item>
                        <el-descriptions-item label="下单用户">
                            <span class="username">{{ userInfo.username }}</span>
                        </el-descriptions-item>
                    </el-descriptions>

                    <!-- 操作按钮 -->
                    <div class="action-buttons">
                        <el-button type="primary" @click="orderSumbit" :loading="isSubmitting">
                            {{ isSubmitting ? '提交中...' : '立即下单' }}
                        </el-button>
                        <el-button @click="goIndex">返回</el-button>
                    </div>
                </el-card>
            </div>
            <div v-show="article.isShow === 1" class="article-detail">
                <!-- 标题区 -->
                <div class="article-header">
                  <div class="title-section" style="display: flex; justify-content: center; align-items: center; position: relative;">
                    <h1 class="article-title" style="text-align: center; margin: 0 auto;">{{ article.title }}</h1>
                    <el-button
                      :type="isCollectedState ? 'danger' : 'primary'" 
                      @click="toggleCollect"
                      class="collect-btn"
                      style="position: absolute; right: 0;"
                    >
                      <el-icon>
                        <component :is="isCollectedState ? Star : StarFilled" />
                      </el-icon>
                      {{ isCollectedState ? '取消收藏' : '收藏' }}
                    </el-button>
                  </div>
                  <div class="article-meta" style="text-align: center; margin-top: 20px;">
                    <span class="author">作者：{{ article.username }}</span>
                    <span class="time">发布时间：{{ moment(article.createTime).format('YYYY-MM-DD HH:mm') }}</span>
                    <span class="views">阅读量：{{ article.watchNums }}</span>
                  </div>
                </div>

                <!-- 内容区 -->
                <el-card class="content-card">
                    <!-- 文章内容 -->
                    <div ref="articleContentRef" class="mt-5 article-content" v-viewer v-html="article.content"></div>
                </el-card>
            </div>
        </el-main>
    </el-container>

    <!--个人信息对话框-->
    <el-dialog v-model="info" title="个人信息" width="500px" class="custom-dialog">
        <el-form :model="form1" label-width="80px" style="padding: 10px;">
            <el-form-item label="头像">
                <div style="display: flex; align-items: center;">
                    <el-avatar :src="form1.avatar" :icon="UserFilled"
                        style="background-color: #8ac8ff; margin-right: 10px;" />
                    <el-upload :on-change="handleAvatarChange" :auto-upload="false" :show-file-list="false"
                        :file-list="fileList">
                        <el-button size="small" type="primary">修改头像</el-button>
                    </el-upload>
                </div>
            </el-form-item>

            <el-form-item label="用户名">
                <el-input v-model="form1.username" autocomplete="off" placeholder="请输入用户名" style="width: 130px" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer" style="text-align: right;">
                <el-button @click="info = false">取消</el-button>
                <el-button type="primary" @click="saveInfo">保存</el-button>
            </div>
        </template>
    </el-dialog>

    <!--修改密码对话框-->
    <el-dialog v-model="password" title="修改密码" width="500px" class="custom-dialog">
        <el-form :model="form2" label-width="80px" style="padding: 10px;">
            <el-form-item label="旧密码">
                <el-input type="password" v-model="form2.password" autocomplete="off" placeholder="请输入旧密码"
                    style="width: 200px" />
            </el-form-item>
            <el-form-item label="新密码">
                <el-input type="password" v-model="form2.newPassword" autocomplete="off" placeholder="请输入新密码"
                    style="width: 200px" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer" style="text-align: right;">
                <el-button @click="password = false">取消</el-button>
                <el-button type="primary" @click="savePassword">保存</el-button>
            </div>
        </template>
    </el-dialog>

</template>


<style lang="scss" scoped>
$primary-blue: #409EFF;
$hover-blue: rgba(64, 158, 255, 0.1);

/* 容器强化全屏居中 */
.order-card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 60px);
    width: 100%;
    padding: 20px;
}

/* 卡片主体 */
.order-card {
    width: 800px;
    margin: 0 auto;
    min-height: 500px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 30px;

    /* 标题区域右对齐 */
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px;

        .el-tag {
            margin-left: auto;
            order: 2;
        }
    }

    /* 按钮居中 */
    .action-buttons {
        margin-top: 40px;
        display: flex;
        justify-content: center;
        gap: 20px;

        .el-button {
            width: 160px;
            margin: 0 !important;
        }
    }
}

/* 响应式适配 */
@media screen and (max-width: 768px) {
    .order-card {
        width: 95%;
        padding: 20px;

        .card-header h2 {
            font-size: 22px !important;
        }
    }
}


/* h1, h2, h3, h4, h5, h6 标题样式 */
::v-deep(.article-content h1,
    .article-content h2,
    .article-content h3,
    .article-content h4,
    .article-content h5,
    .article-content h6) {
    color: #292525;
    line-height: 150%;
    font-family: PingFang SC, Helvetica Neue, Helvetica, Hiragino Sans GB, Microsoft YaHei, "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
}

::v-deep(.article-content h2) {
    line-height: 1.5;
    font-weight: 700;
    font-synthesis: style;
    font-size: 24px;
    margin-top: 40px;
    margin-bottom: 26px;
    line-height: 140%;
    border-bottom: 1px solid rgb(241 245 249);
    padding-bottom: 15px;
}

::v-deep(.article-content h3) {
    font-size: 20px;
    margin-top: 40px;
    margin-bottom: 16px;
    font-weight: 600;
}

::v-deep(.article-content h4) {
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 16px;
    font-weight: 600;
}

::v-deep(.article-content h5) {
    font-size: 16px;
    margin-top: 30px;
    margin-bottom: 14px;
    font-weight: 600;
}

::v-deep(.article-content h6) {
    font-size: 16px;
    margin-top: 30px;
    margin-bottom: 14px;
    font-weight: 600;
}

/* p 段落样式 */
::v-deep(.article-content p) {
    letter-spacing: .3px;
    margin: 0 0 20px;
    line-height: 30px;
    color: #4c4e4d;
    font-weight: 400;
    word-break: normal;
    word-wrap: break-word;
    font-family: -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Arial, sans-serif;
}

/* blockquote 引用样式 */
::v-deep(.article-content blockquote) {
    border-left: 2.3px solid rgb(52, 152, 219);
    quotes: none;
    background: rgb(236, 240, 241);
    color: #777;
    font-size: 16px;
    margin-bottom: 20px;
    padding: 24px;
}

/* 设置 blockquote 中最后一个 p 标签的 margin-bottom 为 0 */
::v-deep(.article-content blockquote p:last-child) {
    margin-bottom: 0;
}

/* 斜体样式 */
::v-deep(.article-content em) {
    color: #c849ff;
}

/* 超链接样式 */
::v-deep(.article-content a) {
    color: #167bc2;
}

::v-deep(.article-content a:hover) {
    text-decoration: underline;
}

/* ul 样式 */
::v-deep(.article-content ul) {
    padding-left: 2rem;
}

::v-deep(.article-content > ul) {
    margin-bottom: 20px;
}

::v-deep(.article-content ul li) {
    list-style-type: disc;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 16px;
}

::v-deep(.article-content ul li p) {
    margin-bottom: 0 !important;
}

::v-deep(.article-content ul ul li) {
    list-style-type: square;
}

/* ol 样式 */
::v-deep(.article-content ol) {
    list-style-type: decimal;
    padding-left: 2rem;
}

/* 图片样式 */
::v-deep(.article-content img) {
    max-width: 100%;
    overflow: hidden;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
}

::v-deep(.article-content img:hover,
    img:focus) {
    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, .15);
}

/* 图片描述文字 */
::v-deep(.image-caption) {
    min-width: 20%;
    max-width: 80%;
    min-height: 43px;
    display: block;
    padding: 10px;
    margin: 0 auto;
    font-size: 13px;
    color: #999;
    text-align: center;
}

/* code 样式 */
::v-deep(.article-content code:not(pre code)) {
    padding: 2px 4px;
    margin: 0 2px;
    font-size: 95% !important;
    border-radius: 4px;
    color: rgb(41, 128, 185);
    background-color: rgba(27, 31, 35, 0.05);
    font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;
}

/* 表格样式 */
::v-deep(table) {
    margin-bottom: 20px;
    width: 100%;
}

::v-deep(table tr) {
    background-color: #fff;
    border-top: 1px solid #c6cbd1;
}

::v-deep(table th) {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
}

::v-deep(table td) {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
}

::v-deep(table tr:nth-child(2n)) {
    background-color: #f6f8fa;
}

/* hr 横线 */
::v-deep(hr) {
    margin-bottom: 20px;
}

/* pre code 样式 */
::v-deep(code) {
    font-size: 98%;
}

::v-deep(pre) {
    margin-bottom: 20px;
}

::v-deep(pre code.hljs) {
    padding-top: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 0.7rem;
    border-radius: 6px;
}

::v-deep(pre:before) {
    background: #fc625d;
    border-radius: 50%;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    content: ' ';
    height: 10px;
    margin-top: 10px;
    margin-left: 10px;
    position: absolute;
    width: 10px;
}

.article-detail {
    width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.title-section {
    margin-bottom: 30px;
}

.article-title {
    font-size: 2.4rem;
    color: #2c3e50;
    line-height: 1.3;
    margin-bottom: 20px;
    text-align: center;
}

.meta-info {
    background: #f8f9fa;
    padding: 18px;
    border-radius: 8px;
}

.author-info,
.stats {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666;
    font-size: 0.95rem;
}

.el-icon {
    font-size: 1.1rem;
    vertical-align: middle;
}

.right-col {
    display: flex;
    justify-content: flex-end;
}

.content-card {
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.article-cover {
    width: 100%;
    height: 400px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.article-content {
    line-height: 1.8;
    font-size: 1.05rem;
    color: #444;
}

.article-content :deep(img) {
    max-width: 100%;
    border-radius: 8px;
    margin: 1.5em 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .article-title {
        font-size: 1.8rem;
    }

    .right-col {
        justify-content: flex-start;
        margin-top: 15px;
    }

    .article-cover {
        height: 250px;
    }
}

.home-container {
    background: #fff;
    min-height: 100vh;

    /* 容器布局 */
    .header {
        height: 70px !important;
        background: #ffffff;
        /* 纯白背景替代毛玻璃 */
        border-bottom: 1px solid #ebeef5;
    }

    .nav-container {
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 24px;
    }

    /* Logo样式 */
    .logo {
        font-size: 24px;
        font-weight: 600;
        margin-right: 48px;
        color: #303133;
    }

    .logo .blue {
        color: #409eff;
    }

    /* 导航菜单核心配置 */
    .el-menu--horizontal {
        background: transparent !important;
        border-bottom: none !important;
        flex: 1;
    }

    .el-menu-item {
        height: 64px;
        line-height: 64px;
        font-size: 16px;
        padding: 0 28px;
        color: #606266;
        transition: color 0.3s;
    }

    .el-menu-item.is-active {
        color: #409eff !important;
        border-bottom: 2px solid #409eff;
    }

    /* 搜索框定制 */
    .search-box {
        margin-left: auto;
        margin-right: 24px;
    }

    .search-box .el-input {
        --el-input-border-radius: 20px;
        --el-input-bg-color: #f5f7fa;
    }

    .search-box .el-input__wrapper {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

    /* 用户面板 */
    .user-panel .el-button {
        border-radius: 20px;
        padding: 10px 24px;
        background: #409eff;
        color: white;
    }

    .main-content {
        max-width: 1400px; // 扩大容器宽度
        width: 98%; // 增加自适应能力

        .course-section {
            .el-col {
                @media (min-width: 1200px) {
                    flex: 0 0 25%; // 大屏显示4列课程卡片
                    max-width: 25%;
                }
            }
        }

        margin: 0 auto;
        padding: 20px;



        .category-sidebar {
            .section-title {
                color: #303133;
                font-size: 20px;
                margin-bottom: 15px;
            }

            .category-item {
                display: flex;
                align-items: center;
                padding: 7px;
                transition: all 0.3s;

                &:hover {
                    background: #f8f9fa;
                    transform: translateX(5px);
                }

                .icon-box {
                    width: 40px;
                    height: 40px;
                    border-radius: 8px;
                    margin-right: 15px;
                }

                .cate-name {
                    font-size: 16px;
                    color: #606266;
                }
            }
        }

        // .main-section {
        //   margin-bottom: 40px;
        // }

        // .compact-carousel {

        //   border-radius: 8px;
        //   overflow: hidden;
        //   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

        //   .carousel-slide {
        //     height: 100%;
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;
        //     background: linear-gradient(135deg, #409EFF, #79bbff);

        //     h2 {
        //       color: white;
        //       font-size: 28px;
        //       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
        //     }
        //   }
        // }

        /* 轮播容器优化 */
        .enhanced-carousel {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* 轮播项容器 */
        .carousel-slide {
            position: relative;
            width: 100%;
            height: 100%;
        }

        /* 图片容器 */
        .image-wrapper {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        /* 图片填充处理 */
        .carousel-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* 保持比例填充容器 */
            object-position: center;
            /* 图片中心裁剪 */
            transition: transform 0.3s ease;
        }

        /* 悬浮标题样式 */
        .floating-title {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px 30px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
            color: white;
        }

        .title-text {
            margin: 0;
            font-size: 1.5em;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }

        /* 指示器样式优化 */
        :deep(.el-carousel__indicators--outside) {
            bottom: 40px;
            /* 调整指示器位置 */
        }


        /* 悬停效果 */
        @media (hover: hover) {
            .carousel-image:hover {
                transform: scale(1.03);
            }
        }

        .course-section {
            .section-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 30px;
            }

            .course-card {
                transition: all 0.3s;
                margin: 0 10px 15px; // 增加左右间距
                width: calc(100% - 20px); // 防止溢出

                &:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                }

                .course-cover {
                    height: 180px;
                    background: #909399;
                    border-radius: 4px;
                    margin-bottom: 15px;
                }

                .title {
                    color: #303133;
                    font-size: 16px;
                    margin-bottom: 12px;
                }

                .meta {
                    display: flex;
                    justify-content: space-between;
                    color: #909399;

                    .price {
                        color: #F56C6C;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}

/* 子菜单卡片样式 */
.category-item {
    position: relative;
    /* 建立定位基准 */

    .submenu-card {
        position: absolute;
        left: calc(100% + 15px);
        /* 右侧间距 */
        width: 200px;
        // z-index: 999; /* 确保覆盖轮播图 */
        z-index: 9999 !important;
        /* 临时测试 */
        background: white;
        border: none;

        /* 与原轮播图阴影保持一致 */
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

        /* 避免覆盖原分类项的hover效果 */
        pointer-events: none;
    }

    /* 子项交互优化 */
    .submenu-content {
        pointer-events: auto;
        padding: 10px;

        .sub-item {
            padding: 8px 12px;
            transition: background 0.2s;

            &:hover {
                background: #f5f7fa;
                cursor: pointer;
            }
        }
    }
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s, transform 0.2s;
}

.fade-enter-from {
    opacity: 0;
    transform: translateX(-10px);
}

.fade-leave-to {
    opacity: 0;
}

.article-header {
  margin-bottom: 20px;
  
  .title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    
    .article-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
    
    .collect-btn {
      margin-left: 20px;
    }
  }
  
  .article-meta {
    color: #909399;
    font-size: 14px;
    
    span {
      margin-right: 20px;
      
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
